import React, { useState } from 'react';
import { View, Text } from 'react-native';

const DragAndDrop = ({ items, onDrop }) => {
  const [draggedItem, setDraggedItem] = useState(null);

  return (
    <View style={styles.container}>
      {items.map((item, index) => (
        <View 
          key={index}
          style={draggedItem === item ? styles.dragging : styles.item}
          onDragStart={() => setDraggedItem(item)}
          onDragEnd={() => setDraggedItem(null)}
          onDrop={() => onDrop(draggedItem, item)}
        >
          <Text>{item.name}</Text>
        </View>
      ))}
    </View>
  );
};

export default DragAndDrop;